<template>
    <div class="header">
        <div class="title">田中笠后台管理系统</div>
        <div class="container">
            <ul>
                <template v-if="profile.token">
                    <li>
                        <router-link to="/"
                            ><el-icon style="vertical-align: middle"
                                ><User /></el-icon
                            ><span> {{ profile.nickname }} </span></router-link
                        >
                    </li>
                    <li>
                        <a @click="logout()" href="javascript:;"
                            ><span>退出登录</span></a
                        >
                    </li>
                </template>
                <template v-else>
                    <li>
                        <router-link to="/"><span>请先登录</span></router-link>
                    </li>
                    <li>
                        <router-link to="/"><span>免费注册</span></router-link>
                    </li>
                </template>
                <li>
                    <a href="https://tianzhongli.shop" target="_blank"
                        ><span>去官网</span></a
                    >
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { User, Iphone } from '@element-plus/icons-vue'
import { computed } from 'vue'
import { adminStore } from '../stores/admin'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const useAdminStore = adminStore()
const profile = computed(() => useAdminStore.profile)

const logout = () => {
    useAdminStore.setAdmin({})
    router.push('/login')
    ElMessage({
        type: 'warning',
        message: '成功退出！',
    })
}
</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    height: 100%;
    background-color: #1e2732cb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .title {
        position: absolute;
        color: #cdcdcd;
        margin-left: 40px;
        font-size: 20px;
    }
    ul {
        list-style: none;
        display: flex;
        height: 30px;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 3px;
        li {
            a {
                transition: color 0.2s ease;
                span {
                    vertical-align: middle;
                }
                padding: 0 15px;
                color: #cdcdcd;
                line-height: 1;
                display: inline-block;
                vertical-align: middle;
                i {
                    font-size: 14px;
                    margin-right: 2px;
                }
                &:hover {
                    color: #da9233;
                }
            }
            ~ li {
                a {
                    border-left: 2px solid #666;
                }
            }
        }
    }
}
</style>
